<template>
<el-container style="height: 100%">
  <el-header id="head">
    <span class="title">Rain 图书管理系统</span>
      <el-popover placement="bottom-end" style="height: 100px" trigger="click" width="350">
        <el-avatar slot="reference" :src="user.image" id="user" :size="50">
        </el-avatar>
        <span style="font-size: 1rem;font-weight: 500;line-height: 2">{{user.email}}</span>
        <div class="space1"></div>
        <el-tag type="success">{{user.manage?'管理员用户':'普通用户'}}</el-tag>
        <div class="space1" style="border-bottom: solid 1px #8c939d "></div>
        <el-menu style="border-right: 0">
          <el-menu-item @click="edit">
            <template #title>
              <i class="el-icon-user-solid" style="color: #3a8ee6"></i>&nbsp;
              <span>修改信息</span>
            </template>
          </el-menu-item>
          <el-menu-item @click="logout" route="/logout">
            <template #title>
              <i class="el-icon-switch-button" style="color: #e63a3a"></i>&nbsp;
              <span>退出登录</span>
            </template>
          </el-menu-item>
        </el-menu>
      </el-popover>
  </el-header>
  <el-container>
    <el-aside style="background-color: rgb(238, 241, 246)" width="15%">
      <el-menu :default-active="this.$route.path" router>
<!--        <el-menu-item index="/message" route="/message">-->
<!--          <template #title>-->
<!--            <i class="el-icon-message"></i>-->
<!--            <span class="list">我的消息</span>-->
<!--            <el-badge v-if="user.unreadMessage>0" :value="user.unreadMessage" style="display: inline;margin-bottom: 37px;-->
<!--  margin-left: 15px;"/>-->
<!--          </template>-->
<!--        </el-menu-item>-->
        <el-menu-item index="/books" route="/books">
          <template #title>
            <i class="el-icon-notebook-1"></i>
            <span class="list">我的图书</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/data" route="/data">
          <template #title>
            <i class="el-icon-data-analysis"></i>
            <span class="list">数据统计</span>
          </template>
        </el-menu-item>
<!--        <el-submenu index="2">-->
<!--          <template #title>-->
<!--            <i class="el-icon-user"></i>-->
<!--            <span class="list">我的资料</span>-->
<!--          </template>-->
<!--          <el-menu-item index="/profile" route="/profile"><span class="list">基本信息</span></el-menu-item>-->
<!--          <el-menu-item index="/directory" route="/directory"><span class="list">联系地址</span></el-menu-item>-->
<!--        </el-submenu>-->
<!--        <el-submenu index="3">-->
<!--          <template #title>-->
<!--            <i class="el-icon-shopping-cart-2"></i>-->
<!--            <span class="list">我的订单</span>-->
<!--          </template>-->
<!--          <el-menu-item index="/order/send" route="/order/send"><span class="list">我寄出的</span></el-menu-item>-->
<!--          <el-menu-item index="/order/receive" route="/order/receive"><span class="list">我收到的</span></el-menu-item>-->
<!--        </el-submenu>-->
      </el-menu>
    </el-aside>
    <router-view ref="router" @getManager="getManager"></router-view>
  </el-container>
  <user ref="user"></user>
  </el-container>
</template>

<script>
import user from '../components/user.vue'
export default {
  name: 'main',
  components: {
    user
  },
  created () {
    this.$axios.get('user/get-user').then((res) => {
      if (res.data.data === undefined) {
        this.$message.error('请先登录！')
        this.$router.replace('/')
      } else {
        this.user = res.data.data
        if (this.user.image === null) {
          this.user.image = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
        }
      }
    }
    )
  },
  data () {
    return {
      autoUpload: true, // 自动上传
      activeName: 'first', // 添加/编辑窗口Tab标签名称
      user: {},
      menuList: [
        {
          'path': '1',
          'title': '工作台',
          'icon': 'fa-dashboard',
          'children': []
        }]
    }
  },
  methods: {
    edit: function () {
      this.$refs.user.dialogFormVisible = true
      this.$refs.user.email = this.user.email
      this.$refs.user.uploadFile = 'api/user/picture/' + this.user.email
    },
    logout: function () {
      this.$axios.delete('/user/logout').then((res) => {
        this.$message.success('退出登录成功！')
      })
      this.$router.replace('/')
      localStorage.removeItem('manage')
    },
    getManager: function () {
      this.$refs.router.manage = this.user.manage
      console.log(this.manage)
    }
  }
}
</script>

<style scoped>
#head {
  background-color: #3f51b5;
  color: #fff;
  line-height: 60px;
  box-shadow: 0 0 7px 3px #aaa;
  z-index: 10;
}
#user{
  cursor: pointer;
  float: right;
  font-size: 1.7em;
  margin-top: 0.2em;
}
.space1 {
  padding: 8px 0;
}
.list {
  font-size: 1rem;
}
.title {
  font-size: 1.2em;
  font-weight: 500;
  padding-left: 0.7em;
}
</style>
